<template>
  <Modal :title="!dataForm.id ? '新增问卷' : '修改问卷'"
         id="questionnaire-management-add-update"
         :fullscreen="true"
         @on-ok="save"
         @on-cancel="handleReset"
         v-model="visible">
    <Form class="form-custom"
          ref="formCustom"
          :label-width="80">
      <FormItem label="问卷名称">
        <Input v-model="questionnaireName"
               style="width:400px;"
               clearable
               placeholder="问卷名称"></Input>
      </FormItem>
    </Form>
    <div class="question choice-question">
      <div class="title">
        <div>单选题</div>
      </div>
      <div class="btn-wrap">
        <Button type="primary"
                @click="add(1)">再添一题</Button>
      </div>

      <choice-question ref="question1"
                       @del="(index)=>{del(1,index)}"
                       :questionData="question1"></choice-question>
    </div>
    <div class="question choice-questions"
         v-if="0">
      <div class="title">
        <div>多选题</div>

      </div>
      <div class="btn-wrap">
        <Button type="primary"
                @click="add(2)">再添一题</Button>
      </div>
      <choice-question ref="question2"
                       :questionNum="'2'"
                       @del="(index)=>{del(2,index)}"
                       :questionData="question2"></choice-question>
    </div>
    <div class="question subjective-questions">
      <div class="title">
        <div>主观题</div>
      </div>
      <div class="btn-wrap">
        <Button type="primary"
                @click="add(3)">再添一题</Button>
      </div>
      <choice-question ref="question3"
                       :questionNum="'3'"
                       @del="(index)=>{del(3,index)}"
                       :questionData="question3"></choice-question>
    </div>
    <div slot="footer"
         class="footer">
      <Button @click="handleReset">取消</Button>
      <Button type="primary"
              @click="save">确认</Button>
    </div>
  </Modal>
</template>

<script>
const questionItem = {
  title: "",
  a: '',
  b: '',
  c: '',
  d: '',
  e: '',
  f: ''
}
import ChoiceQuestion from './choice-question'
import { addQuestionnaires, queryQuestionnaireInfo } from '@/api/management'
export default {
  data () {
    return {
      dataForm: {},
      visible: false,
      questionnaireName: "",
      question1: [Object.assign({}, questionItem)],
      question2: [Object.assign({}, questionItem)],
      question3: [Object.assign({}, { title: questionItem.title })],
    }
  },
  components: {
    ChoiceQuestion
  },
  methods: {
    init (row) {
      this.visible = true
      this.$nextTick(() => {
        if (row) {
          this.addNew = false
          queryQuestionnaireInfo({ questionnaireId: row.questionnaireId }).then(res => {

          })
        } else {

        }
      })
    },
    add (index) {
      switch (index) {
        case 1:
          this.question1.push(Object.assign({}, questionItem))
          break;
        case 2:
          this.question2.push(Object.assign({}, questionItem))
          break;
        case 3:
          this.question3.push(Object.assign({}, { title: questionItem.title }))
          break;
      }
    },
    del (num, index) {
      this['question' + num].splice(index, 1)
    },
    // 关闭弹窗则清除form表单内容
    handleReset () {
      this.$refs.formCustom.resetFields();
      this.questionnaireName=''
      this.question1=[Object.assign({}, questionItem)]
      this.question2=[Object.assign({}, questionItem)]
      this.question3=[Object.assign({}, { title: questionItem.title })]
      this.visible = false
      console.log('resetFields')
    },
    save () {
      if (!this.questionnaireName) {
        this.$Message.warning('请填写问卷名称');
        return
      }
      if (this.checkTitle(this.question1)) {
        this.$Message.warning('单选题题目名称不能为空');
        return
      }
      if (!this.checkOptions(this.question1, 2)) {
        this.$Message.warning('单选题至少有两个选项');
        return
      }
      // if (this.checkTitle(this.question2)) {
      //   this.$Message.warning('多选题题目名称不能为空');
      //   return
      // }
      // if (!this.checkOptions(this.question2, 3)) {
      //   this.$Message.warning('多选题至少有三个选项');
      //   return
      // }
      if (this.checkTitle(this.question3)) {
        this.$Message.warning('主观题目名称不能为空');
        return
      }
      let questionnaireExercisesList = []
      this.question1.forEach((item) => {
        questionnaireExercisesList.push({
          exerciseType: 0,
          exerciseName: item.title,
          remark: '',
          exercisesAnswersList: [
            {
              answer: item.a,
              answerOption: 'A',
              remark: ''
            },
            {
              answer: item.b,
              answerOption: 'B',
              remark: ''
            },
            {
              answer: item.c,
              answerOption: 'C',
              remark: ''
            },
            {
              answer: item.d,
              answerOption: 'D',
              remark: ''
            }
          ]
        })
      })
      // this.question2.forEach((item) => {
      //   questionnaireExercisesList.push({
      //     exerciseType: 1,
      //     exerciseName: item.title,
      //     remark: '',
      //     exercisesAnswersList: [
      //       {
      //         answer: item.a,
      //         answerOption: 'A',
      //         remark: ''
      //       },
      //       {
      //         answer: item.b,
      //         answerOption: 'B',
      //         remark: ''
      //       },
      //       {
      //         answer: item.c,
      //         answerOption: 'C',
      //         remark: ''
      //       },
      //       {
      //         answer: item.d,
      //         answerOption: 'D',
      //         remark: ''
      //       },
      //       {
      //         answer: item.e,
      //         answerOption: 'E',
      //         remark: ''
      //       },
      //       {
      //         answer: item.f,
      //         answerOption: 'F',
      //         remark: ''
      //       }
      //     ]
      //   })
      // })
      this.question3.forEach((item) => {
        questionnaireExercisesList.push({
          exerciseType: 2,
          exerciseName: item.title,
          remark: '',
          exercisesAnswersList: [
            {
              answer: '',
              answerOption: '',
              remark: ''
            },
          ]
        })
      })
      let data = {
        questionnaireName: this.questionnaireName,
        remark: '',
        questionnaireExercisesList: questionnaireExercisesList
      }
      addQuestionnaires(data).then(res => {
        if (res.data == 'success') {
          this.$emit('refreshDataList')
          this.$Message.warning('保存成功');
          this.visible = false
        }
      })
      this.handleReset()
    },
    checkTitle (data) {
      return data.some((item) => {
        return item.title == ''
      })
    },
    checkOptions (data, number) {
      return data.every((item) => {
        let val = Object.values(item)
        val.shift()
        let num = 0
        val.forEach((option) => {
          if (option) {
            num++
          }
        })
        return num >= number
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#questionnaire-management-add-update {
  overflow: auto;
  .form-custom {
    .ivu-form-item {
      .ivu-input {
        width: 400px;
      }
    }
  }
  .question {
    & > .title {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #000;
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      margin-bottom: 10px;
    }
    .btn-wrap {
      text-align: right;
      margin-bottom: 10px;
    }
  }
  .footer {
    text-align: right;
  }
}
</style>